<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core">
      
<ui:composition>

<h:outputLabel value="#{labelText}" for="#{id}" />
			
	<h:inputText value="#{value}" label="#{label}" id="#{id}">
	</h:inputText>
	
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/calendario/js/Datepicker.js"></script>
	
<script type="text/javascript">

	
	var jsonOptions = "";
	var seletor = "#" + "#{form}" + "\\" + ":" + "#{id}";

	var showOn = "#{showOn}";
	var onClose = "#{onClose}";
	var showOtherMonths = "#{showOtherMonths}";
	var changeYear = "#{changeYear}";
	var changeMonth = "#{changeMonth}";
	var showAnim = "#{showAnim}";
	var beforeShowDay = "#{beforeShowDay}";
	var appendText = "#{appendText}";
	var hideIfNoPrevNext = "#{hideIfNoPrevNext}";
	var maxDate = "#{maxDate}";
	var dateFormat = "#{dateFormat}";
	var dayNames = "#{dayNames}";
	var dayNamesMin = "#{dayNamesMin}";
	var dayNamesShort = "#{dayNamesShort}";
	var monthNames = "#{monthNames}";
	var monthNamesShort = "#{monthNamesShort}";
	
	
	//showOn - Tipo: "String" - Cria duas opções para abrir o Calendário, no "button" abre o Calendário ao clicar no Botão, no "both" 
    //tanto pelo botão ou ao clicar no campo.
    //Exemplo de uso:
    //showOn = "button"
	if(showOn != ''){

 		jsonOptions = $.extend(jsonOptions,{"showOn":showOn});
 	 	
 	}

	//showOtherMonths - Tipo: Boolean - Mostra os dias do mês anterior e do próximo mês, porém a seleção desses dias não é possível.
	//Exemplo de uso:
	//showOtherMonths = "true"
 	if(showOtherMonths != ''){

 		jsonOptions = $.extend(jsonOptions,{"showOtherMonths":showOtherMonths});
 		
 	}
 	
	//changeYear - Tipo: Boolean - Habilita um seletor de ano onde o usuário tem todos os anos do calendário em uma lista.
	//Exemplo de uso:
    //changeYear = "true"
 	if(changeYear == "true"){

 		jsonOptions = $.extend(jsonOptions,{"changeYear":changeYear});

 	}
 	
	//changeMonth - Tipo: Boolean - Habilita um seletor de mês onde o usuário tem todos os meses do ano em uma lista.
	//Exemplo de uso:
	//changeMonth = "true"
 	if(changeMonth == "true"){

 		jsonOptions = $.extend(jsonOptions,{"changeMonth":changeMonth});

 	}

	//onClose - Tipo: Function( String dateText, Object inst ) - Logo após a seleção da Data, esta função mostra uma mensagem 
	//confirmando qual data foi Selecionada.
	//Exemplo de uso:
	//onClose = "A data selecionada foi:"
 	if(onClose != ''){

 	 	onClose = "#{onClose}";
 		jsonOptions = $.extend(jsonOptions,{"onClose":
 		
 	 	 	 function(dateText, inst){

 	 	 	 	alert(onClose + dateText);

 	 	 	}

 		});

 	}
 	
	//showAnim -  Tipo: String - Abre o calendário estilo animação abrindo pela lateral, de cima para baixo, vibrando etc. 
	//Tipos de efeito: Show (default), slideDown, fadeIn, blind(UI Effect), bounce(UI Effect), clip(UI Effect), 
	//drop(UI Effect), fold(UI Effect), slide(UI Effect), None.
	//Exemplo de uso:
	//showAnim = "fold"
 	if(showAnim != ''){

 		jsonOptions = $.extend(jsonOptions,{"showAnim":showAnim});
 		
 	}
 	
 	//beforeShowDay(no weekends) - Tipo: Function(Date date) - Somente dias úteis selecionaveis, o usuário não consegue selecionar sábado e domingo,
 	//O dia fica invisível, não deixando que a operação seja executada.
 	//Exemplo de uso:
 	//beforeShowDay = "noWeekends"
 	if(beforeShowDay == "noWeekends"){

 		jsonOptions = $.extend(jsonOptions,{"beforeShowDay":$.datepicker.noWeekends});

 	}

 	//appendText - Tipo: String- É mostrado um exemplo na lateral do campo da data, a forma que deve ser prenchido(definido pelo usuário).
 	//Exemplo de uso: 
 	//appendText = "Exemplo (10/10/2010)"
 	if(appendText != ''){

 		var appendText="#{appendText}";
 		jsonOptions = $.extend(jsonOptions,{"appendText":appendText});

 	}

	//hideIfNoPrevNext - Tipo: Boolean - Elimina as datas anteriores a partir da data atual.
	//Exemplo de uso:
	//hideIfNoPrevNext = "true"
 	if(hideIfNoPrevNext != ''){
		
 		jsonOptions = $.extend(jsonOptions,{"hideIfNoPrevNext":hideIfNoPrevNext});
 		
 	}

	//maxDate - Tipo: Date, Number ou String - O usuário habilita a quantidade de dias desejado após a data atual, 
	//seja por data,numérico ou String.
	//Exemplo de uso: 
	//maxDate = "+1w" //Aqui seria 1 semana após a data(+1w = 1 week).
	if(maxDate != ''){

		maxDate = "#{maxDate}";
		jsonOptions = $.extend(jsonOptions,{"maxDate":maxDate});
		
	}
	
	//dateFormat Tipo: String - Define a a forma da data que o usuário pretende mostrar, no caso do Brasil utilizamos dd/mm/yy, 
	//o que seria o nosso Default. Pode-se definir também por extenso, no caso passando o mês em maiúsculo. 
	//Exemplo de uso: 
	//dateFormat= "dd 'de' MM 'de' yy - DD" --> "11 'de' Julho 'de' 2015" 
	
	if(dateFormat != ''){
		
		dateFormat = "#{dateFormat}"; 
		jsonOptions = $.extend(jsonOptions,{"dateFormat": dateFormat});

	}

	//dayNames - Tipo: Array - Define os dias da semana ao passar o mouse no dia abreviado.
	//Exemplo de uso:
	//dayNames = "Somingo,Caiu-feira,Tenta-feira,-feira,Quinta-feira,Sexta-feira,Sábado"
	if(dayNames != ''){

		dayNames = "#{dayNames}";
		var vetorNomes = dayNames.split(",");

		jsonOptions = $.extend(jsonOptions,{"dayNames":vetorNomes});

	}

	//dayNamesMin - Tipo: Array - Define os dias da semana de forma abreviada mínima, personalizando de acordo com a necessidade.
	//Exemplo de uso:
	//dayNamesMin = "t1,t2,t3,t4,t5,t6,t7"
	if(dayNamesMin != ''){
 
		dayNamesMin = "#{dayNamesMin}";
		var vetorNames = dayNamesMin.split(",");

		jsonOptions = $.extend(jsonOptions,{"dayNamesMin":vetorNames});
		
	}
	
	//dayNamesShort - Tipo: Array - Define os dias da semana de forma abreviada, personalizando de acordo com a necessidade.
	//Exemplo de uso:
	//dayNamesShort="te1,te2,te3,te4,te5,te6,te7"
	if(dayNamesShort != ''){

		var dayNamesShort = "#{dayNamesShort}";
		var vetorNames = dayNamesShort.split(",");

		jsonOptions = $.extend(jsonOptions,{"dayNamesShort": vetorNames});

	}
	
	//monthNames - Tipo: Array - Define os meses do ano, personalizando de acordo com a necessidade.
	//Exemplo de uso:
	//monthNames = "chaveiro, fevereiro, martir, april, maio, jun, july, agostinho, sete, octo, november, dece"
	//Caso o usuário Alterar o changeMonth , ele deve também alterar o monthNamesShort, que por sua seria sua lista de meses.
	if(monthNames != ''){

		var monthNames = "#{monthNames}";
		var vetorNames = monthNames.split(",");

		jsonOptions = $.extend(jsonOptions,{"monthNames":vetorNames});

	} 

	//monthNamesShort - Tipo: Array - Define os meses do ano de forma abreviada, personalizando de acordo com a necessidade.
	//Exemplo de uso:
	//monthNamesShort = "jam, fervo, mar, apua, malha, julia, juliooo, ago, setem, ouy, nol, dex"
	if(monthNamesShort != ''){

		var monthNamesShort = "#{monthNamesShort}";
		var vetorNames = monthNamesShort.split(",");

		jsonOptions = $.extend(jsonOptions,{"monthNamesShort":vetorNames});

	}
	//Após o usuário passar as opções que será utilizado, ele é carregado no Json e assim executado.
	//Os options não selecionados, será utilizado o Default.
	datepicker.criarCalendario(seletor, jsonOptions);
	
	//setDate - Método para deixar a Data corrente setada ao abrir o calendário
	var setDate = "#{setDate}";

	if(setDate == "true"){

		datepicker.setDate(seletor);
		
	}
	
</script>

</ui:composition>
   
</html>